<template>
    <div>
        <el-form :model="form" label-width="auto" style="max-width: 600px;">
            <el-form-item label="用户名">
                <el-input v-model="account" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="password" />
            </el-form-item>
            <el-form-item label="">
                <el-alert :title="tip" type="error" v-show="showTip" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary">登录</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { ref,watch } from "vue"
    export default {
      name: 'Login',
      components: {
      },
      setup(){
        const account=ref("")
        const password=ref("")
        const tip=ref("")
        const showTip=ref(false)
        
        watch(password, (newValue, oldValue) => {
          console.log("新值是" + newValue + ",旧值是" + oldValue)
          if (newValue.length < 6) {
            tip.value = "密码长度不能小于6";
            showTip.value = true
          } else {
            tip.value = "";
            showTip.value = false
          }
        })
    
        return {
            account,
            password,
            tip,
            showTip
        }
      }
    }

</script>